<template>
  <div class="page-account">
    <div class="page-account-container">
      <div class="page-account-top">
        <div class="page-account-top-logo">
          <img src="@/assets/images/logo.png" alt="logo" />
        </div>
        <div class="page-account-top-desc">白友系统</div>
      </div>
      <Login @on-submit="handleSubmit">
        <UserName name="mobile" :value="username" />
        <Password name="password" :value="password" enter-to-submit />
        <div class="page-account-auto-login">
          <Checkbox v-model="autoLogin" size="large">{{
            $t("page.login.remember")
          }}</Checkbox>
        </div>
        <Submit :loading="loading" class="submitLogin">{{ $t("page.login.submit") }}</Submit>
      </Login>
      <div class="page-account-other">
        <span>{{ $t("page.login.other") }}</span>
        <img
          @click="handleDingLogin"
          src="@/assets/svg/icon-social-dingding.svg"
          alt="dingding"
        />
      </div>
    </div>
    <i-copyright />
    <ding-code ref="dingModal" />
  </div>
</template>
<script>
import iCopyright from "@/components/copyright";
import { mapActions } from "vuex";
import mixins from "../mixins";
import DingCode from "@/components/ding/dingCode";
export default {
  mixins: [mixins],
  components: { iCopyright, DingCode },
  data() {
    return {
      autoLogin: true,
      luck: true,
      loading: false,
      username: "",
      password: "",
    };
  },
  mounted() {
    if (this.$route.query.code && this.$route.query.code !== "") {
      this.loading = true
      this.dingLogin({
        code: this.$route.query.code,
      }).then(() => {
        this.getmenu().then(() => {
          // 重定向对象不存在则返回顶层路径
          this.$router.replace(this.$route.query.redirect || "/");
          this.loading = false
        });
      });
    }
    if (window.localStorage.getItem("loginInfo")) {
      let obj = JSON.parse(window.localStorage.getItem("loginInfo"));
      this.username = obj.mobile;
      this.password = obj.password;
    }
  },


  methods: {
    ...mapActions("admin/account", ["login", "getmenu", "dingLogin"]),
    /**
     * @description 登录
     * 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
     */
    handleSubmit(valid, values) {
      if (valid) {
        const { mobile, password } = values;
        if (this.luck) {
          this.luck = false;
          this.loading = true
          this.login({
            mobile,
            password,
          })
            .then(() => {
              this.loading = false
              if (this.autoLogin) {
                let userLogin = {
                  username: values.mobile,
                  password: values.password,
                };
                window.localStorage.setItem(
                  "loginInfo",
                  JSON.stringify(userLogin)
                );
              } else {
                if (window.localStorage.getItem("loginInfo")) {
                  window.localStorage.removeItem("loginInfo");
                }
              }
              this.getmenu().then(() => {
                // 重定向对象不存在则返回顶层路径
                this.$router.replace(this.$route.query.redirect || "/");
              });
            })
            .finally(() => {
              window.setTimeout(() => {
                this.loading = false
                this.luck = true;
              }, 2000);
            });
        }
      }
    },
    // 钉钉登录
    handleDingLogin() {
      this.$refs.dingModal.show("/login");
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ivu-input-prefix,
.ivu-input-suffix {
  display: none;
}
.page-account-auto-login label {
  font-size: 16px !important;
}
/deep/.submitLogin button {
  color: #fff;
  background-color: #30b862;
  border-color: #30b862;
  height: 40px;
  padding: 0 15px;
  font-size: 16px;
  border-radius: 4px;
}
/deep/.submitLogin button span {
  font-size: 16px !important;
}
</style>
